import React, { useState, useEffect, Fragment } from 'react';
import { TreeSelect, Input } from 'antd';
import { Tree, Button, Table, Pagination } from 'antd';
import { history } from 'umi';
import axios from 'axios';
import { DownOutlined } from '@ant-design/icons';
import './natice_type.less';
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import { ConfigProvider } from 'antd';
const Index = () => {
  useEffect(() => {
    getNotice();
    getNoticeData();
  }, []);
  const [treedata, settreedata] = useState();

  const getNotice = async () => {
    let { data } = await axios.get('http://127.0.0.1:7777/news/notice');
    settreedata(data.noticedata);
  };
  const [notice_id, setnotice_id] = useState();
  const [page, setpage] = useState(1);
  const [datas, setdata] = useState([]);
  const [pagesize, setpagesize] = useState(3);
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const columns = [
    {
      title: '序号',
      width: '18%',
      render: (text, record, index) => `${index + 1}`,
    },
    {
      title: '公告名称',
      dataIndex: 'noticeName',
      key: 'noticeName',
    },
    {
      title: '接收人员',
      dataIndex: 'personnel',
      key: 'personnel',
    },
    {
      title: '公开',
      dataIndex: 'open',
      key: 'open',
      render: (_, record) => {
        return record.locking == false ? '否' : '是';
      },
    },
    {
      title: '公告时间',
      dataIndex: 'createTime',
      key: 'createTime',
    },
  ];
  const onSelectChange = (newSelectedRowKeys) => {
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  const getNoticeData = async (notice_id = '63e05c0d0e25230e1c481244') => {
    let { data } = await axios.get(
      `http://127.0.0.1:7777/news/notice_four/?notice_id=${notice_id}`,
    );
    setdata(data.datas);
  };
  const renderTable = () => {
    return (
      <div>
        <Table
          columns={columns}
          rowKey={(record) => record._id}
          pagination={false}
          dataSource={datas}
          rowSelection={rowSelection}
        />
        <ConfigProvider locale={zh_CN}>
          <Pagination
            total={4}
            showTotal={(total) => `共有条 ${total} 数据`}
            defaultPageSize={10}
            current={1}
            showSizeChanger
            pageSizeOptions={[1, 3, 5, 7]}
          />
        </ConfigProvider>
      </div>
    );
  };
  const onSelect = (keys) => {
    getNoticeData(keys[0]);
    setnotice_id(keys[0]);
  };

  return (
    <Fragment>
      <div className="notice">
        <div className="notice_left">
          {treedata && (
            <Tree
              showLine
              switcherIcon={<DownOutlined />}
              defaultExpandAll
              checkStrictly={true}
              treeData={treedata}
              onSelect={onSelect}
            />
          )}
        </div>
        <div className="notice_right">
          <div className="header_notice">
            <div className="headerbtn">
              <Button>新增</Button>
            </div>
            <div className="headerbtn">
              <Button>保存</Button>
            </div>
            <div className="headerbtn">
              <Button>删除</Button>
            </div>
          </div>
          <div>
            {/* 渲染表格 */}
            {renderTable()}
          </div>
        </div>
      </div>
    </Fragment>
  );
};

export default Index;
